<template>

  <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'

export default {
  // name: 'deals',
  props: {
    echarData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      dom: null
    }
  },

  methods: {
    resize () {
      this.dom.resize()
    },
    initCharts () {
      this.$nextTick(() => {
        this.dom = echarts.init(this.$refs.dom)
        this.setOptions(this.echarData)
        // this.dom.setOption(echarts1_option, true)
        on(window, 'resize', this.resize)
      })
    },
    setOptions (pdata) {
      this.dom.setOption({
        tooltip: {
          trigger: 'axis', // 设置tip提示
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          show: true,
          top: '3%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          backgroundColor: '#f8f8f8',
          containLabel: true
        },
        xAxis: [ // 设置x轴
          {
            type: 'category',
            boundaryGap: true, // 坐标轴两边不留白
            data: pdata.dateArr, // ['2010-10-07', '2010-10-08', '2010-10-09', '2010-10-10', '2010-10-11', '2010-10-12', '2010-10-13'],
            axisLine: {
              // 坐标轴轴线相关设置。
              lineStyle: {
                color: '#000'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              // 坐标轴轴线相关设置。
              lineStyle: {
                color: '#000'
              }
            }
          }
        ],
        series: [
          {
            name: '交易金额',
            type: 'line',
            stack: '总量',
            // areaStyle: { normal: {
            //   color: '#009688'
            // } },
            lineStyle: { normal: {
              color: '#009688'
            } },
            data: pdata.trade_sum// [0, 2, 0, 5, 0, 4, 0]
          }
        ]
      })
    }

  },
  mounted () {
    // 指定图表的配置项和数据
    this.initCharts()
    // const echarts1_option = {
    //   tooltip: {
    //     trigger: 'axis', // 设置tip提示
    //     axisPointer: {
    //       type: 'cross',
    //       label: {
    //         backgroundColor: '#6a7985'
    //       }
    //     }
    //   },
    //   grid: {
    //     show: true,
    //     top: '3%',
    //     left: '1.2%',
    //     right: '1%',
    //     bottom: '3%',
    //     backgroundColor: '#f8f8f8',
    //     containLabel: true
    //   },
    //   xAxis: [ // 设置x轴
    //     {
    //       type: 'category',
    //       boundaryGap: true, // 坐标轴两边不留白
    //       data: this.eData, // ['2010-10-07', '2010-10-08', '2010-10-09', '2010-10-10', '2010-10-11', '2010-10-12', '2010-10-13'],
    //       axisLine: {
    //         // 坐标轴轴线相关设置。
    //         lineStyle: {
    //           color: '#000'
    //         }
    //       }
    //     }
    //   ],
    //   yAxis: [
    //     {
    //       type: 'value',
    //       axisLine: {
    //         // 坐标轴轴线相关设置。
    //         lineStyle: {
    //           color: '#000'
    //         }
    //       }
    //     }
    //   ],
    //   series: [
    //     {
    //       name: '交易金额',
    //       type: 'line',
    //       stack: '总量',
    //       // areaStyle: { normal: {
    //       //   color: '#009688'
    //       // } },
    //       lineStyle: { normal: {
    //         color: '#009688'
    //       } },
    //       data: this.tradeData// [0, 2, 0, 5, 0, 4, 0]
    //     }
    //   ]
    // }
  },
  // 数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    echarData (newVal, oldVal) {
      if (this.dom) {
        if (newVal) {
          this.setOptions(newVal)
        } else {
          this.setOptions(oldVal)
        }
      } else {
        this.initCharts()
      }
    }
  },

  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>

<style></style>
